import React from 'react'
import { BrowserRouter, createBrowserRouter, RouterProvider, Router, Route, Routes, Navigate, Link, Outlet, useRoutes } from 'react-router-dom'
const boxStyle = {
  margin: '10px',
  border: '1px solid #ccc',
  borderRadius: '10px',
  padding: '10px',
}
const inlineFlexStyle = {
  display: 'flex',
  justifyContent: 'flex-start',
  padding: '2px',
  gap: '6px'
}

// BrowserRouter可以不放置在app的根节点
// BrowserRouter也可以不是本组件的根节点
export function RouterApp() {
  return (
    <div style={boxStyle}>
      <p>BrowserRouter也可以不是本组件的根节点</p>
      <BrowserRouter>
        <div style={{ 'minWidth': '460px' }} >
          <nav>
            <section>
              <p>React Router Example</p>
            </section>
          </nav>
          <Routes>
            <Route path="/" element={<App />}>
              <Route path="about" element={<About />} />
              <Route path="inbox" element={<Inbox />}>
                <Route path="messages/:id" element={<Message />} />
              </Route>
            </Route>
          </Routes>
        </div>
      </BrowserRouter>
    </div>
  )
}

function App(props) {
  return (
    <div>
      <ul style={inlineFlexStyle}>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/inbox">Inbox</Link></li>
      </ul>
      <Outlet />
    </div>
  )
}

function About() {
  return (
    <div style={boxStyle}>
      <h3>这是About组件啊</h3>
    </div>
  )
}

function Inbox(props) {
  return (
    <div style={boxStyle}>
      <h2>这是Inbox组件啊</h2>
      {props.children || "Welcome to your Inbox"}
    </div>
  )
}

function Message(props) {
  return (
    <div style={boxStyle}>
      <h3>Message {props.params.id}</h3>
    </div>
  )
}